<template>
	<view class="activityDetails">
		<view class="con2">
			<image class="con2-qrc" :src="codeImg" mode=""></image>
		</view>
		<view class="status-box" style="position: absolute;right: 60rpx;top: 280rpx;">
		<show-status :name="info.statusName" size="180" fontSize="50" boder="5"
			:color="info.status==-1 ? '#cc0000' : (info.status==-2 ? '#fbca3f' : (info.status==1 ? '#009900' : '#FF0000')) ">
		</show-status>
		</view>
		<view class="con1" @click="jump('merchant_detail', info.id)">
			<view class="con1-name"> {{info.title}} </view>
		</view>
		<view class="con3" @click="jump('achievement', 'type=merchant&itemId='+info.id)" v-if="info.is_pay">
			店铺总业绩：{{info.achievement}}
		</view>
		<view class="list-box" v-for="(item,index) in info.extensionInfo" :key="index" @click="jump(item.jumpType, item.jumpLink)">
			<view class="list-left"> {{item.title}} </view>
			<view class="list-right"> {{item.num}} </view>
		</view>
		
		
		<share-box ref="shareBox" :title="info.title" 
		:userName="info.username" :userPortrait="info.head_portrait" 
		:reduction_1="info.reduction_1" 
		:reduction_2="info.reduction_2" 
		:reduction_3="info.reduction_3" 
		reduction_4="超圳时代查看详情" 
		:codeUrl="info.codeUrl" />
		<button class="sign" type="default" @click="showShare()">弹出海报</button>
        <uni-popup ref="popup">
            <view class="show">
                <view class="show_title">申请数量</view>
                <input class="show_input" type="number" placeholder="请输入您要申请数量" v-model="payData.openNum"/>
                <view class="show_info" v-if="info.openRemark != ''">
                    <view>说明：</view>
                    <view v-html="info.openRemark"></view>
                </view>
                <view class="show_btn">
                    <text class="show_text" @click="subFun(0)" style="color: rgba(60, 72, 104, 0.4)">取消</text>
                    <text class="show_text" @click="subFun(1)">确认</text>
                </view>
            </view>
        </uni-popup>
        <uni-popup ref="showPayView" type="bottom">
        	<view class="pay_type">
        		<image @click="close" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png" mode="aspectFill"></image>
        		<view class="title">选择支付方式</view>
        		<view class="paypir">
        			<text>开通费用</text>
        			<text>￥{{pay_money}}</text>
        		</view>
        		<view class="line2"  v-if="use_hdq > 0"  @click="setUseOther(1)">
        			<text>使用互动券 {{use_hdq}} 抵扣金额 ￥{{use_hdq}}</text>
        			<view :class="payData.is_use_hdq == 1 ?'check':'nocheck'"></view>
        		</view>
        		<view class="line2"  v-if="pay_money > 0" @click="selPayType(5)">
        			<text>余额支付 - 当前余额：{{payInfo.user_money}}</text>
        			<view :class="payData.payment_type == 5 ?'sel':'nosel'"  v-if="Number(payInfo.user_money) >= Number(pay_money)"></view>
        			<text v-else @click="jump('on_line_recharge')">余额不足</text>
        		</view>
        		<view class="line2" v-if="pay_money > 0"  @click="selPayType(1)">
        			<text>在线微信支付</text>
        			<view :class="payData.payment_type == 1 ?'sel':'nosel'"></view>
        		</view>
        		<view :style="'height:' + bottomHeight + 'rpx;'" class="pay_bot" @click="subPayForm()">确认支付</view>
        	</view>
        </uni-popup>
	</view>
</template>

<script>
	var _self;
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	import uniQrcode from '../static/wxqrcode.js';
	import wechatPay from '../static/wechatPay.js';
	export default {
		data() {
			return {
				bottomHeight: 110,
				/* 底部按钮高度，避免iPhonex导航黑条 */
				id: 0,
				info: {
					id: '',
					title: '',
					status: 1,
					is_pay: 0,
					statusName: '正常',
					codeUrl: '',
					achievement: 0,
					extensionInfo: []
				},
				codeImg: '',
                openRemark: '',
                payInfo : {
                    money: 600,
                    user_money: 0,
                    user_hdq: 0,
                    sure_hdq: 180,
                },
                payData: {
                    appkey: uni.getStorageSync('appkey'),
                    'access-token': uni.getStorageSync('access-token'),
                    applyType: 'merchant_num',
                    is_use_hdq: 0,
                    payment_type: 1,
                    mid: 0,
                    openNum: 3,
                },
                isPay: true,
                pay_money: 0,
                use_hdq : 0,
			}
		},
		methods: {
			getInfo() {
				serve.request({
					url: '/spread/merchant/main',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						id:_self.id
					}
				}).then(res => {
					if (res.code == 200) {
						_self.info = res.data;
                        _self.payInfo = res.data.account;
						_self.codeImg = _self.info.codeUrl;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							success() {
								setTimeout(function() {
									uni.redirectTo({
										url: '/pages/my/my'
									});
								}, 2000)
							}
						});
					}
				});
			},
            subFun(type) {
                if(type == 0) {
                    _self.$refs.popup.close();
                    return ;
                }
                if(_self.payData.openNum <= 0) {
                    uni.showToast({
                    	title: "请填写正确的开通数量",
                    	icon : 'none'
                    });
                    return ;
                }
                _self.calculationTotalMoney();
                _self.$refs.popup.close();
                _self.$refs.showPayView.open();
            },
            subPayForm() {
                if(_self.isPay == false) {
                	return ;
                }
                _self.isPay = false;
                serve.request({
                	url: '/spread/merchant/open-num',
                	data: _self.payData
                }).then(res => {
                	_self.isPay = true;
                	if(res.code != 200){
                		uni.showToast({
                			title: res.message,
                			icon: 'none',
                		});
                		return ;
                	}
                	if(res.data.isPay == 1) {
                		wechatPay.payItemFun(res.data.payType, res.data.payId, res.data.pageUrl);
                	} else {
                		uni.redirectTo({
                			url:res.data.pageUrl
                		})
                	}
                });
            },
            setUseOther(type) {
            	if(type == 1) {
            		_self.payData.is_use_hdq = _self.payData.is_use_hdq == 1 ? 0 : 1;
            	} 
            	_self.calculationTotalMoney();
                _self.$forceUpdate();
            },
            selPayType(payType) {
            	if(payType == 5 && Number(_self.payInfo.user_money) < Number(_self.pay_money)) {
            		return ;
            	}
            	_self.payData.payment_type = payType;
                _self.$forceUpdate();
            },
            calculationTotalMoney() {
                _self.pay_money = _self.payData.openNum * _self.payInfo.money;
                let totalHdq = _self.payData.openNum * _self.payInfo.sure_hdq;
                if(totalHdq > 0 && _self.payInfo.user_hdq > 0) {
                    _self.use_hdq = _self.payInfo.user_hdq > totalHdq ? totalHdq : _self.payInfo.user_hdq;
                	if(_self.payData.is_use_hdq) {
                		_self.pay_money = Number(_self.pay_money) - Number(_self.use_hdq);
                	}
                }
                _self.$forceUpdate();
            },
			showShare(){
				_self.$refs.shareBox.open();
			},
			close() {
				_self.$refs.showPayView.close();
                _self.$refs.popup.close();
			},
			jump(jump_type, jump_link) {
                if(jump_type == 'apply_merchant') {
                    _self.$refs.popup.open();
                    return ;
                }
				common.jump(jump_type, jump_link)
			}
		},
		onLoad(options) {
			_self = this;
			if (uni.getSystemInfoSync().safeAreaInsets.top > 20) {
				_self.bottomHeight = 178;
			}
			_self.id = options.id || 0;
            _self.payData.mid = _self.id;
			if(_self.id == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon : 'none',
					success:function(){ 
						setTimeout(function () { 
							common.jump('return_one')
						}, 2000) 
					} 
				});
				return;
			}
			_self.getInfo();
		},
		onPullDownRefresh() {
			_self.getInfo();
		},
	}
</script>

<style scoped lang="scss">
	.activityDetails {
		padding: 0 36rpx;
		padding-bottom: 200rpx;
		font-size: 32rpx;
		color: #1e2022;
	}
	.con1 {
		padding: 20rpx 0;
		display: flex;
		text-align: center;
		justify-content: center;
	}
	.con1-name {
		text-align: center;
		line-height: 54rpx;
	}
	.con1-dp {
		width: 160rpx;
		text-align: center;
		color: #fff;
		background: red;
		height: 54rpx;
		font-size: 26rpx;
		border-radius: 40rpx;
		line-height: 54rpx;
		margin-left: 60rpx;
	}
	.con1-disc {
		display: flex;
		line-height: 80rpx;
	}
	.con1-no {}
	.con1-dj {
		margin-left: 36rpx;
	}
	.con2 {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
	}
	.con2-qrc {
		width: 300rpx;
		height: 300rpx;
	}
	.con3 {
		text-align: center;
		margin-top: 16rpx;
		padding: 20rpx;border-bottom: 2rpx solid #eaeaea;
	}
	.but-box {}
	.list-box {
		border-bottom: 2rpx solid #eaeaea;
		display: flex;
		justify-content: space-between;
		align-content: center;
		padding: 20rpx;
	}
	.but-box {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #ffffff;
	}

	.but1 {
		width: 250rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #2b85e4;
		color: #fff;
	}

	.but2 {
		width: 250rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #FFBC00;
		color: #fff;
	}

	.but3 {
		width: 250rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #dd6161;
		color: #fff;
	}

    
    .sign{
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	background: #FFC600;
    	position: fixed;
    	bottom: 0rpx;
    	width: 100%;
    	left: 0;
    	height: 100rpx;
    	font-weight: bold;
    	font-size: 32rpx;
    	color: #FFFFFF;
    	/* z-index: 9999; */
    }
    .pickupCode-box {
    	width: 100vw;
        height: 100vh;
    	background: #fff;
    	border-radius: 8rpx; 
    }
    .title-i {
    	width: 100%;
        text-align: center;
        color: #333333;
        height: 100rpx;
        line-height: 100rpx;
        font-size: 36rpx;
    }
    .img{
    	width: 480rpx;
		height: 48rrpx;
		position: relative;
		left: 50%;
		margin-left: -240rpx;
		margin-top: 30rpx;
    }
    .pickupCode-t{
    	    width: 100%;
    	    text-align: center;
    	    height: 60rpx;
    	    line-height: 60rpx;
    	    letter-spacing: 8rpx;
    	    font-size: 40rpx;
    }
    .btn{
    	    width: 100%;
    	    height: 100rpx;
    	    text-align: center;
    	    line-height: 100rpx;
    	    font-size: 32rpx;
    	    color: #333333;
    }
    .nav {
    	display: flex;
    	width: 100%;
    	height: 120upx;
    	background: #FFFFFF;
    	z-index: 200;
    	align-items: center;
    	border-bottom: 1upx rgba(204, 204, 204, 0.3) solid;
    
    	
    }
    .nav_item {
    	width: 50%;
    	text-align: center;
        
    }
    
    .hover {
    	border-bottom: 8upx rgba(251, 202, 63, 1) solid;
    	color: rgba(35, 52, 91, 1) !important;
    	font-weight: bold;
    }
    
    .nav_name {
    	padding: 0upx 10upx;
    	display: inline-flex;
    	height: 32upx;
    	font-size: 32upx;
    	color: rgba(60, 72, 104, 0.5);
    }
    
    .show{
    	width: 600rpx;
    	background: #FFFFFF;
    	border-radius: 20rpx;
    }
    .show_title{
    	text-align: center;
    	font-size: 32rpx;
    	height: 80rpx;
    	line-height: 80rpx;
    	border-bottom: 1rpx rgba(60, 72, 104, 0.05) solid;
    }
    .show_input{
    	padding: 20rpx 30rpx;
    	border: 2rpx solid #ccc;
    	width: 80%;
    	margin: 50rpx 5%;
    }
    .show_info{
    	padding: 0 20rpx 40rpx;
    }
    .show_btn{
    	font-size: 28rpx;
    	// padding: 20rpx 90rpx;
    	display: flex;
    	justify-content: space-between;
    	border-top: 1rpx rgba(60, 72, 104, 0.05) solid;
    }
    .show_text{
    	width: 50%;
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
    }
    .pay_type {
    	position: relative;
    	width: 100%;
    	background: #FFFFFF;
    	padding-bottom: 140upx;
    	max-height: 80vh;
    
    	text {
    		font-size: 42rpx;
    	}
    
    	.close {
    		position: absolute;
    		width: 23upx;
    		height: 23upx;
    		right: 40upx;
    		top: 45upx;
    	}
    
    	.title {
    		width: 100%;
    		text-align: center;
    		height: 100upx;
    		line-height: 100upx;
    		font-size: 36upx;
    		border-bottom: 1upx rgba(251, 251, 253, 1) solid;
    	}
    
    	.paypir {
    		display: flex;
    		justify-content: center;
    		flex-direction: column;
    		align-items: center;
    		// padding: 20upx 0upx 20upx;
    		font-size: 28upx;
    
    		text:last-child {
    			color: #FF5F60;
    			font-size: 50upx;
    			font-weight: bold;
    			margin-top: 10upx;
    		}
    	}
    
    	.line2 {
    		width: 100%;
    		box-sizing: border-box;
    		padding: 36upx;
    		display: flex;
    		justify-content: space-between;
    		font-size: 28upx;
    		color: #333333;
    		border-bottom: 1upx rgba(251, 251, 253, 1) solid;
    
    		.txt {
    			color: #999999;
    		}
    
    		.nosel {
    			width: 36upx;
    			height: 36upx;
    			border: 1upx solid rgba(60, 72, 104, 1);
    			border-radius: 50%;
    		}
    
    		.sel {
    			background-image: url(../static/img/check.png);
    			background-repeat: no-repeat;
    			width: 40upx;
    			height: 40upx;
    			background-size: 100%;
    		}
			
			.nocheck {
				width: 36upx;
				height: 36upx;
				border: 1upx solid rgba(60, 72, 104, 1);
				border-radius: 20%;
			}
			
			.check {
				background: url(../static/img/checkbox_check.png);
				background-repeat: no-repeat;
				width: 40upx;
				height: 40upx;
				background-size: 100%;
			}
    	}
    
    	.pay_bot {
    		width: 100%;
    		position: fixed;
    		left: 0;
    		bottom: 0;
    		height: 100upx;
    		background: #FFBF0A;
    		color: #fff;
    		font-size: 32upx;
    		line-height: 100upx;
    		text-align: center;
    		border-radius: 0;
    
    		&::after {
    			border: none;
    		}
    	}
    }
</style>
